import { defineComponent } from 'vue';
import { ElMenu, ElMenuItem, ElSubMenu, ElMessage } from 'element-plus';
import _ from 'lodash-es';
import $style from './index.module.scss';
import menus from './menus.json';

export default defineComponent({
    setup() {
        const eventList = {
            /**
             * @description 查看
             * @return { void }
             */
            handleWatch() {
                ElMessage.success('查看')
            }
        };

        const subMenuRender = (subMenu, preIdx) => {
            return subMenu && _.get(subMenu, 'children', []).length
                ? <ElSubMenu
                    key={`${preIdx}`}
                    index={`${preIdx}`}
                    popperClass={$style.popperClass}>
                    {{
                        title: () => subMenu?.title,
                        default: () => _.map(subMenu?.children, (menuItem,idx) => subMenuRender(menuItem,`${preIdx}-${idx}`))
                    }}
                </ElSubMenu>
                : <ElMenuItem
                    key={`${preIdx}`}
                    index={`${preIdx}`}
                    disabled={subMenu?.disabled}
                    onClick={eventList[subMenu?.event]}>
                    {subMenu?.title}
                </ElMenuItem>
        };

        return () => (<ElMenu
            class={$style.menuBar}
            mode="horizontal"
        >
            {_.map(menus, (subMenu, idx) => subMenuRender(subMenu, idx))}
        </ElMenu>);
    }
})